<!--
 * @Author: your name
 * @Date: 2021-06-23 17:40:15
 * @LastEditTime: 2021-11-09 11:24:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfengts\src\pages\layout\layout.vue
-->

<template>
  <div class="Layout">
    <!-- 定义整体容器布局 -->
    <el-container>
      <el-aside width="10%">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo"
          router
          text-color="#fff"
          active-text-color="#ffd04b"
          background-color="#2c61a7"
          :collapse="false"
        >
          <div v-for="item in routerArr" :key="item.name">
            <el-submenu :index="item.path" v-if="item.key">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item :index="val.path" v-for="val in item.children" :key="val.name">
                <template slot="title">
                  <!-- <i class="icon iconfont">*</i> -->
                  <span>{{ val.name }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-menu-item :index="item.path" v-if="!item.key && !item.hidden">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- <el-header style="text-align: right; font-size: 12px">
          <el-row>
            <el-col :span="24">
              <div class="announcement">
                <span class="announcementImg"></span>
                <div class="announcementContent">
                  <marquee>{{ accountOutLine }}</marquee>
                </div>
                <span class="announcementExamine" @click="lookForAnnouncement">查看记录</span>
              </div>
            </el-col>
          </el-row>
        </el-header> -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 公告消息弹出框 -->
    <!-- 中止弹出框 -->
    <CommonDialog
      title="公告"
      width="75%"
      v-bind:dialogVisible="announcementDialogVisible"
      @on-change-dialogVisible="announcementChange"
      class="announcementDialog"
      top="10vh"
    >
      <template #body>
        <div class="messageReminderContent" v-for="(item, index) in messageOutput" :key="index">
          <div class="messaageContent">
            {{ item.announcementContent }}
          </div>
          <div class="messageFooter">
            <span>{{ item.createdAt | resolvingDate }}</span>
          </div>
        </div>
      </template>
      <template #dialog_footer>
        <el-button type="primary" class="submitReme" @click="closeAnnouncementDialog">关闭</el-button>
      </template>
    </CommonDialog>
    <!--

  记录一下创建的页面的名字
  总览:Overview
  反馈总览:Feedback
  待办:myWait
  任务总览:task
  数据统计：dataStatistics

 --></div>
</template>
<script>
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
import { OverView } from '@/api/overView/service'
export default {
    name: '',
    components: { CommonDialog },
    props: {},
    data() {
        return {
            routerArr: [],
            accountOutLine: '',
            announcementDialogVisible: false,
            messageOutput: []
        }
    },
    filters: {
    /**
     * @description: 时间格式过滤器
     * @param {Date} date 传入的时间值
     * @return {String} times 按照规则格式后的时间字符串
     */
        resolvingDate(date) {
            const d = new Date(date)
            const month = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1
            const day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
            const hours = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
            const min = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
            const sec = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds()
            const times = d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec
            return times
        }
    },
    created() {},
    activated: function() {},
    mounted() {
        const menuArr = JSON.parse(sessionStorage.getItem('MENULIST'))
        this.routerArr = menuArr
        this.GetAllAnnouncementListAsync()
    },
    methods: {
    /**
     * @description: 公告弹出框弹出框传入子组件的更改
     * @param {Boolean} val 弹出框的显示或隐藏
     */
        announcementChange(val) {
            this.announcementDialogVisible = val
        },

        /**
     * @description: 查看 公告
     */
        lookForAnnouncement() {
            this.announcementDialogVisible = true
        },

        /**
     * @description: 关闭 公告展示
     */
        closeAnnouncementDialog() {
            this.announcementDialogVisible = false
        },
        /**
     * @description: 获得当前登陆人所拥有的公告信息 汇总
     */
        async GetAllAnnouncementListAsync() {
            try {
                const result = await OverView.GetAllAnnouncementListAsync()
                if (result.success) {
                    this.messageOutput = result.data
                    if (this.messageOutput.length > 0) {
                        this.accountOutLine = this.messageOutput[0].announcementContent
                    }
                }
            } catch (err) {
                console.log(err)
            }
        }
    }
}
</script>

<style scoped lang="less">
.Layout {
  width: 100%;
  height: 100%;
  ::v-deep .el-main {
    padding: 0 !important;
  }
}

.el-container {
  height: 100%;
}

.el-aside {
  height: 100%;
  color: red;
  border-radius: 0px 0px 0px 0px;
  background-color: #fff;
}

.el-menu {
  height: 100%;
  border-right: none;
  background: url(~@/assets/image/Bg@2x.png) no-repeat center center;
  background-color: rgb(45, 90, 102);
  background-size: 107% 100%;
  margin: 0;
  padding: 0;
}

.el-main {
  padding: 0;
  // overflow: hidden;
}

.el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background: url(~@/assets/image/selected.png) no-repeat center center !important;
}

.el-menu-item .menu_list_img {
  margin-right: 10px;
}
/* 公告  */
.announcement {
  background: white;
  padding: 10px;
  height: 30px;
  margin-bottom: 15px;
  line-height: 30px;
  border-radius: 5px;
  display: flex;
  align-items: center;

  .announcementImg {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('~@/assets/image/icon/notice.png') no-repeat;
    background-size: contain;
  }
  .announcementContent {
    width: 95%;
    font-size: 14px;
    height: 30px;
    font-weight: 500;
    max-width: 92%;
    color: #333;
    line-height: 30px;
    padding: 0 10px;
    position: relative;
    .rollInline {
      position: absolute;
    }
  }
  .announcementExamine {
    height: 100%;
    white-space: nowrap;
    line-height: 30px;
    font-size: 14px;
    color: #3579e0;
    font-weight: 500;
    cursor: pointer;
  }
}
</style>
